import React, { PureComponent } from 'react';
import { Drawer, Divider, Col, Row } from 'antd';
import * as selectOption from '../../../common/selectOption';

const pStyle = {
  fontSize: 16,
  color: 'rgba(0,0,0,0.85)',
  lineHeight: '24px',
  display: 'block',
  marginBottom: 16,
};
const fileName = {
  width: '30px',
  height: '30px',
};
const DescriptionItem = ({ title, content, ohter }) => (
  <div
    style={{
      fontSize: 14,
      lineHeight: '22px',
      marginBottom: 7,
      color: 'rgba(0,0,0,0.65)',
    }}
  >
    <p
      style={{
        marginRight: 8,
        display: 'inline-block',
        color: 'rgba(0,0,0,0.85)',
      }}
    >
      {title}:
    </p>
    {ohter ? (
      <a href={ohter} target="_blank">
        <img src={ohter} style={fileName} alt="" />
      </a>
    ) : (
      content
    )}
  </div>
);

class DrawerComponent extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { visible, onClose, descInfo } = this.props;
    console.log(descInfo);
    return (
      <Drawer
        width={640}
        placement="right"
        closable={true}
        onClose={() => onClose(false, [])}
        visible={visible}
      >
        <p style={{ ...pStyle, marginBottom: 24 }}>企业名称：{descInfo.enterpriseName}</p>
        <p style={pStyle}>企业基本信息</p>
        <Row>
          <Col span={12}>
            <DescriptionItem title="企业简称" content={descInfo.shortName} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="注册资本(万元)" content={descInfo.capital} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="组织机构代码" content={descInfo.organizationNumber} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="登记注册号" content={descInfo.registrationNumber} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem
              title="税务登记证号类型"
              content={descInfo.taxType === 1 ? '地税' : '国税'}
            />
          </Col>
          <Col span={12}>
            <DescriptionItem title="税务登记证号" content={descInfo.taxNumber} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="经营地址" content={descInfo.address} />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="企业特征"
              content={selectOption.enterpriseCharacter.map(l => {
                if (l.key === descInfo.enterpriseCharacter) {
                  return l.value;
                }
              })}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem
              title="企业性质"
              content={selectOption.enterpriseNature.map(l =>
                l.key === descInfo.enterpriseNature ? l.value : ''
              )}
            />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="公司类型"
              content={selectOption.enterpriseType.map(l =>
                l.key === descInfo.enterpriseType ? l.value : ''
              )}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem
              title="行业分类"
              content={selectOption.industryClassification.map(l =>
                l.key === descInfo.industryClassification ? l.value : ''
              )}
            />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="关联类型"
              content={selectOption.relationType.map(l =>
                l.key === descInfo.relationType ? l.value : ''
              )}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem
              title="是否上市"
              content={selectOption.listed.map(l => (l.key === descInfo.listed ? l.value : ''))}
            />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="是否集团"
              content={selectOption.listed.map(l => (l.key === descInfo.hasGroup ? l.value : ''))}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem
              title="进出口权标识"
              content={selectOption.listed.map(l =>
                l.key === descInfo.entranceFlag ? l.value : ''
              )}
            />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="经济类型"
              content={selectOption.economicType.map(l =>
                l.key === descInfo.economicType ? l.value : ''
              )}
            />
          </Col>
        </Row>

        <Divider />
        <p style={pStyle}>法人基本信息</p>
        <Row>
          <Col span={12}>
            <DescriptionItem title="企业法人" content={descInfo.legalName} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="手机号" content={descInfo.mobile} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="邮箱" content={descInfo.email} />
          </Col>
          <Col span={12}>
            <DescriptionItem
              title="证件类型"
              content={selectOption.identifyType.map(l =>
                l.key === descInfo.identifyType ? l.value : ''
              )}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="证件编号" content={descInfo.identifyNumber} />
          </Col>
        </Row>

        <Divider />
        <p style={pStyle}>银行账户信息</p>
        <Row>
          <Col span={12}>
            <DescriptionItem title="开户银行名称" content={descInfo.bankName} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="还款银行账户" content={descInfo.bankAccount} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="银行卡归属地" content={descInfo.bankAttach} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="开户支行名称" content={descInfo.bankSubBranchName} />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <DescriptionItem title="开户行许可证号" content={descInfo.bankPermissionCode} />
          </Col>
        </Row>
        <Divider />
        <p style={pStyle}>资料信息</p>
        <Row>
          <Col span={12}>
            <DescriptionItem title="法人证件照" ohter={descInfo.legalCard} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="管理员证件照" ohter={descInfo.managerCard} />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <DescriptionItem title="开户许可证" ohter={descInfo.bankPermission} />
          </Col>
          <Col span={12}>
            <DescriptionItem title="营业执照" ohter={descInfo.businessLicense} />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <DescriptionItem title="法大大申请表" ohter={descInfo.fddApplyChart} />
          </Col>
        </Row>
      </Drawer>
    );
  }
}

export default DrawerComponent;
